<template>
  <van-popup :show="show" style="width: 400px" round @click-overlay="closeModal">
    <div class="rounded m-2 p-2">
      <div class="w-full p-2 border-b">拷贝登录信息</div>
      <div>
        <div class="text-red-500">PC登录地址</div>
        <div class="border rounded p-2">{{ copyInfo.pc }}</div>
      </div>
      <div>
        <div class="text-red-500">H5登录地址</div>
        <div class="border rounded p-2">{{ copyInfo.h5 }}</div>
      </div>
      <div>
        <div class="text-red-500">APP下载地址</div>
        <div class="border rounded p-2">{{ copyInfo.app_down }}</div>
      </div>
      <div>
        <div class="text-red-500">下级登录账号</div>
        <div class="border rounded p-2">{{ data.username }}</div>
      </div>
      <div>
        <div class="text-red-500">下级昵称</div>
        <div class="border rounded p-2">{{ data.nickname }}</div>
      </div>
      <div>
        <div class="text-red-500">下级初始登录密码</div>
        <div class="border rounded p-2">{{ data.passwordText }}</div>
      </div>
    </div>
    <div class="m-2 flex justify-between">
      <button
        @click="closeModal"
        class="border border-white rounded text-black bg-gray-100 px-4 py-1"
      >
        返回
      </button>
      <button
        @click="copyFunc"
        class="border border-white rounded text-white bg-blue-500 px-4 py-1"
      >
        确认拷贝
      </button>
    </div>
  </van-popup>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue'
import { copy } from '@/utils/copy'

const emit = defineEmits(['close'])

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  data: {
    type: Object,
    default: () => {
      return {}
    }
  },
  copyInfo: {
    type: Object,
    default: () => {
      return {}
    }
  }
})

function copyFunc() {
  let text = `PC登录地址:${props.copyInfo.pc}\nH5登录地址:${props.copyInfo.h5}\nAPP下载地址:${props.copyInfo.app_down}\n下级登录账号:${props.data.username}\n下级昵称:${props.data.nickname}\n下级初始登录密码:${props.data.passwordText}`
  copy(text)
  emit('close')
}

function closeModal() {
  emit('close')
}
</script>
